<template>
    <div>
        <!--面包屑导航-->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>
                <a href="../../api/rights.js">用户权限管理</a>
            </el-breadcrumb-item>
            <el-breadcrumb-item>用户权限列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!--plus卡片区域---->
        <el-card>
            <!--表格大边框-->
            <!-- border：表格边框线，stripe:表格隔行变色  -->
            <el-table :data="rightsList" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="权限名称" prop="authName"></el-table-column>
                <el-table-column label="路径" prop="path"></el-table-column>
                <el-table-column label="权限等级" prop="level">
                    <!--  作用域插槽  -->
                    <template #default="scope">
                        <el-tag v-if="scope.row.level === '0'">一级</el-tag>
                        <el-tag type="success" v-if="scope.row.level === '1'">二级</el-tag>
                        <el-tag type="warning" v-if="scope.row.level === '2'">三级</el-tag>
                    </template>
                </el-table-column>
            </el-table>
            <!-- <el-table  :data="rightList" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="用户权限名称" prop="authName"></el-table-column>
                <el-table-column label="执行权限路径" prop="path"></el-table-column>
                <el-table-column label="执行权限等级" prop="level"></el-table-column>
                <template #default="scope">
                    <el-tag v-if="scope.row.level === '0'">这是一级</el-tag>
                    <el-tag type="success" v-if="scope.row.level === '1'">这是二级</el-tag>
            </el-table> -->
        </el-card>
    </div>
</template>

<script setup>
import { getRightsListApi } from '../../api/rights'
import { ref } from 'vue'
// 获取对象权限列表
const rightList = ref([])
getRightsListApi().then(res => {
    console.log(res)
    rightList.value = res
})
</script>

<style lang="scss" scoped></style>